<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue常用指令</title>

    <!-- <script>
        .first{

        }

    </script> -->

</head>
<body>
    <script src="/js/vue.js"></script>

    <div id="app">
        <!-- mustache 用法 胡子语法 插值语法 {{}} -->
        <p>{{msg}}</p>

        <!-- v-once 只渲染一次 render -->
        <p v-once>{{msg}}</p>

        <!-- v-pre 取消渲染 -->
        <p v-pre>{{msg}}</p>

        <!-- v-text 在DOM元素中插入文本内容，v-text会替换DOM元素中原来的内容 -->
        <p v-text="message">{{msg}}</p>

        <!-- v-html 用于输出元素的html内容，如果数据中包含html标签，将html标签解析后输出 -->
        <div v-html="myHtml"></div>

        <!-- v-bidu 数据绑定 -->
        <!-- v-bind: 指令可以写成“ : ”语法就是简写 -->
        <a v-bidu:href="myUrl"></a>
        <a :href="myUrl"></a>

        <!-- v-bind 动态绑定 class属性 对象语法 class里面放一个对象 -->
        <!-- <p class="first second">{{msg}}</p> -->
        <p class="first:thisFirst second:thisSecond">{{msg}}</p>
        <p class="changeClass()">{{msg}}</p>


    </div>

    <script>
        let app = new Vue({
            el:'#app',
            data:{
                msg:'hello word',
                message:"hello",
                myHtml:"word",
                myUrl:"www.baidu.com",
                thisFirst:true,
                thisSecond:true
            },
            methods:{
                changeClass(){
                    thisFirst:true
                    thisSecond:true
                    return {}
                }

            },
        })
    </script>
    
    
</body>
</html>